<template>
    <div class="aside-container">
        <div class="logo">
            <i class="el-icon-school"></i>
            <span>学校管理中心</span>
        </div>
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu>
             <el-submenu v-for="item in list" :index='item.id' :key="item.id"  @click="handleClick1(item.name)">
                 <template slot="title">{{item.name}}</template>
                    <el-menu-item-group v-if="item.children">
                            <el-menu-item v-for="item2 in item.children" :index="item2.id" :key="item2.id" @click="handleClick2(item2)">{{item2.name}}</el-menu-item>
                    </el-menu-item-group>
             </el-submenu>
            </el-menu>
        </el-aside>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'AsideView',
  props: {},
  components: {},
  data () {
    return {
      list: [
        { id: '1', name: '首页' },
        { id: '2', name: '课程管理' },
        { id: '3', name: '项目管理' },
        { id: '4', name: '课表管理' },
        { id: '5', name: '产品管理' },
        {
          id: '6',
          name: '学生管理',
          children: [
            { id: '61', name: '全部学生', path: '/add' },
            { id: '62', name: '审核管理' }
          ]
        },

        { id: '7', name: '导师管理' },
        { id: '8', name: '作品管理' },
        { id: '9', name: '学校管理' },
        { id: '10', name: '基地管理' },
        { id: '11', name: '机构管理' },
        { id: '12', name: '媒体管理' },
        { id: '13', name: '订单管理' },
        { id: '14', name: '账号管理' },
        { id: '15', name: '消息管理' },
        { id: '16', name: 'banner管理' },
        { id: '17', name: '字典管理' }
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {
    ...mapMutations(['addTab']),
    handleClick2 (e) {
      this.addTab(e)
      this.$router.push(e.path)
    }

  },
  /**
  */
  created () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.aside-container{
    background: #F5F6FA;
    height:100vh;

    .logo{
        padding: 20px;
        background-color: #1EAB72;
        color: #fff;
        display: flex;
        i{
            font-size: 30px;
        }
        span{
            font-weight: bold;
            display: block;
            margin-left: 8px;
        }
    }
    ul{
        margin: 0;
        padding: 0;
        .first{
        list-style: none;
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: center;
        &:hover{
            background-color: #1EAB72;
        }
    }
    }
}
</style>
